<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>第一季啊</title>
    <style media="screen">
      .v-for{
        display: flex;
      }
    </style>
  </head>
  <body>
      <div id="app">
        <ol>
          <li>
          <h3>HelloWord!</h3>
          </li>
            {{message}}
            <br>
            {{reversedMessage}}
          <li>
              <h3>v-if、v-else && v-show</h3>
            <br>
            <div v-if="isLogin">
              你好!欢迎登陆橘子世界
            </div>
            <div v-else>
            你连通行证都没有就像糊弄过去么？
            </div>
            <div v-show='isLogin'>
              <ul>
                <li>v-if:判断是否加载，可以减轻服务器的压力，在需要时加载</li>
                <li>v-show:调整css display属性，可以使客户操作更加流畅</li>
              </ul>
            </div>
          </li>
          <li>
            <h3>v-for指令：解决模版循环问题</h3>
            <br>
            <div class="v-for">
              <ul>
                <li v-for='item in itmesFirst'>
                  {{item}}
                </li>
              </ul>
              <ul>
                <li v-for="a in sorItems">
                  {{a}}
                </li>
              </ul>
            </div>
          </li>

        </ol>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
      <script type="text/javascript">
        var app = new Vue({
          el:'#app',
          data:{
            message:'Hello Vue!',
            isLogin:true,
            itmesFirst:[20,30,18,65,32,19,54,42],
          },
          computed:{
            sorItems:function(){
              return this.itmesFirst.sort();
            },
            reversedMessage: function () {
              // `this` 指向 app 实例
              return this.message.split('').reverse().join('')
            },
          }
        })

      </script>
  </body>
</html>
